<!--
 * @Author: windys
 * @Description: 问题详情
 * @Date: 2022-03-11 15:25:42
-->
<template>
  <div class="page">
    <van-nav-bar title="问答详情" left-arrow @click-left="handleRturn" fixed>
    </van-nav-bar>

    <div class="ques">
      <span
        >{{ data.nick }} · 提问 · {{ data.pastTime }}

        <van-rate
          v-model="data.starEva"
          size="12"
          color="#ee8c0a"
          style="margin-left: 15px"
        />
      </span>
      <div class="content">{{ data.questionContent }}</div>
      <div class="pic">
        <van-image @click="handleViewImg" v-for="el in data.pictureUrl" :key="el" :src="el" fit="contain" width="80" height="80" style="margin:0 5px" />
      </div>
      <div class="footer">
        <div class="price">价值:{{ data.price }}金石</div>
        <div>{{ data.admireNum }}赞赏 · {{ data.watchCnt }}围观</div>
      </div>
      <div class="watch">
        <span v-for="el in data.watchList" :key="el">{{el}},</span> <span>等人围观</span> 
      </div>
    </div>

    <div class="anwser">
      <div class="header">
        <van-image
          :src="data.headUrl"
          width="30"
          height="30"
          round
          fit="contain"
        />
        <span class="name">{{ data.spcolumnUserName }}</span>
        <span> · 回答了问题{{ data.anCreateTime }}</span>
      </div>

      <div
        v-if="
          data.watchPrice == 0 ||
          (data.watchPrice > 0 && data.payedStatus == 1) ||
          route.query.tab === 'my'
        "
      >
        <div class="anwser_content" v-if="data.content">
          {{ data.content }}
        </div>
        <van-empty v-else description="暂无回答内容" />
      </div>
      <div v-else>
        <van-button type="primary" block round size="small" @click="handlePay"
          >支付{{ data.watchPrice }}金石，围观回答</van-button
        >
      </div>
    </div>
  </div>
</template>


<script  >
import { defineComponent, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ApiGetQuesDetail, ApiPayQueseWatch } from "@/api/ques";
import { Toast } from "vant";
import { ImagePreview } from 'vant';
export default defineComponent({
  setup() {


    const route = useRoute();
    const router = useRouter();
    const handleRturn = () => {
      if (!route.query.from) {
        router.push("/my");
      } else {
        router.go(-1);
      }
    };
    onMounted(() => {
      init();
    });

    const data = ref({});
    const init = async () => {
      const res = await ApiGetQuesDetail({ questionId: route.query.id });
      if (res) {
        data.value = res[0];
        data.value.starEva = parseInt(data.value.starEva);
        data.value.pictureUrl = data.value.pictureUrl.split(',')
      }
    };

    const handlePay = async () => {
      const res = await ApiPayQueseWatch({
        questionId: route.query.id,
        answerId: data.value.answerId,
        nick: data.value.nick,
      });
      if (typeof res === "object") {
        Toast.success("支付成功");
        init();
      }
    };


    const handleViewImg = () =>{
      ImagePreview( data.value.pictureUrl);
    }
    return {
      route,
      data,
      handleRturn,
      handlePay,
      handleViewImg
    };
  },
});
</script>



<style lang="scss" scoped>
.page {
  font-size: 14px;
  padding-top: 50px;
  .ques {
    padding: 10px;
    border-bottom: 8px solid #f1f1f1;
    span {
      color: #575656;
      margin-top: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
    .content {
      font-size: 16px;
      font-weight: bold;
      margin: 10px 0;
      word-break: break-all;
    }
    .footer {
      display: flex;
      font-size: 12px;
      .price {
        color: #ff9100;
        text-align: left;
      }
      div {
        text-align: right;
        width: 100%;
        color: #999;
      }
    }
  }

  .anwser {
    padding: 10px;
    .header {
      display: flex;
      align-items: center;
      .name {
        font-size: 14px;
        margin-left: 10px;
        color: #000;
        margin-right: 2px;
      }
      span {
        font-size: 10px;
        color: #999;
      }
    }
    .anwser_content {
      color: #464444;
      font-size: 16px;
      margin-top: 20px;
    }
  }
  button {
    position: fixed;
    bottom: 20px;
    width: 80%;
    left: 10%;
  }
}
.watch{
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  word-break: break-all;
  font-size: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.pic{
  margin: 10px 0;
  display: flex;
  flex-direction: row;
}
</style>